<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">

<head th:include="~{page/head :: head}"><title>存储桶</title></head>

<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">


    <!--顶部导航栏-->
    <header th:insert="~{page/top_nav::top_nav}"></header>
    <!--左导航-->
    <aside th:insert="~{page/left_nav::left_nav}"></aside>


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (页眉) -->
        <section th:insert="~{page/dash::section_info('储存桶')}"></section>

        <!-- 信息 -->
        <section class="content">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">存储桶</h3>
                    <button class="pull-right btn btn-success" id="create_btn">创建存储桶</button>
                </div>
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>额定大小</th>
                            <th>已用大小</th>
                            <th>剩余空间</th>
                            <th>对象数目</th>
                            <th>创建时间</th>
                            <th>操作</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="bucket:${bucketList}">
                            <td th:text="${bucket.bucketName}">存储桶1</td>
                            <td th:text="${bucket.bucketSize}+MB">5GB
                            </td>
                            <td th:text="${bucket.bucketUseSize}+MB">3GB</td>
                            <td th:text="(${bucket.bucketSize}-${bucket.bucketUseSize})+MB"> 2GB</td>
                            <td th:text="${bucket.objectNum}">1225</td>
                            <td th:text="${bucket.createTime}"></td>
                            <td>
                                <button type="button" class="btn " data-toggle="modal" data-target="#file_remove"
                                        th:onclick="'javascript:removeBucket(\''+${bucket.id}+'\')'">
                                    <i class="glyphicon glyphicon-remove"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
</div>

</body>
<div th:include="~{page/js_content :: jsContent}"></div>
<!-- DataTables -->
<script src="/static/admin/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/admin/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- AdminLTE for demo purposes -->
<!-- <script src="dist/js/demo.js"></script> -->
<!-- page script -->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
    $(function () {
        $('#example1').DataTable();
        $('#example2').DataTable({
            'paging': true,
            'lengthChange': false,
            'searching': false,
            'ordering': true,
            'info': true,
            'autoWidth': false
        })
    });

    function removeBucket(id) {
        layer.confirm('确认删除？', {
            btn: ['取消', '确认'] //按钮
        }, function () {
            layer.msg('取消操作', {icon: 2});
        }, function () {
            $.ajax({
                type: 'POST',
                url: "/bucket/delete/",
                data: {
                    "id": id
                },
                success: function (data) {
                    layer.alert(data["info"], {
                        skin: 'layui-layer-molv',
                        closeBtn: 0,
                        end: function () {
                            window.parent.location.reload()
                        }
                    })
                },
                error: function () {
                    alert("删除失败");
                }
            })
        });
    }

    // 创建存储桶
    $("#create_btn").click(
        function () {
            layer.open({
                type: 2,
                title: '创建存储桶',
                shadeClose: true,
                shade: 0.8,
                area: ['40%', '30%'],
                content: '/createBucket/',
                end: function () {
                    window.parent.location.reload()
                }
            });
        }
    )
</script>

</html>